<template>
    <div class="app">
        <div class="nav" v-if="showNav" >
            <div class="logo">
                <img src="@/assets/imgs/logo-s.png" alt="">
                <span>楚能数据</span>
            </div>
            <el-menu  default-active="0" :default-openeds="['0']">
                <el-sub-menu :index="index.toString()" v-for="(item, index) in tabTitle" :key="index">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        {{ item.name }}
                    </template>
                    <el-menu-item-group>
                        <el-menu-item :index="cont.path + cont.id" v-for="cont in item.router" :key="cont.id"
                            @click="changeRouter(cont.path)">
                            <template #title>
                                <el-icon>
                                    <component :is="cont.icon" />
                                </el-icon>
                                {{ cont.name }}
                            </template>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </div>
        <div class="main">
            <el-container v-if="showNav" >
                <el-header><Header></Header></el-header>
                <el-main><router-view /></el-main>
            </el-container>
            <router-view v-else/>
        </div>

    </div>

</template>

<script>
import { useRouter } from 'vue-router';
import { watch, ref, onMounted, getCurrentInstance } from 'vue'
import { getToken, removeToken, removeUserInfo } from "@/utils"
import Header from './views/BaseSystem/SystemHeader.vue'
export default {
    components:{
        Header
    },
    setup() {
        let showNav = ref(false)
        let user_token = ref('')
        // let updateKey = ref(0)
        const message = getCurrentInstance()?.appContext.config.globalProperties.$ElMessage
        const tabTitle = [
            {
                name: '主页',
                icon: 'HomeFilled',
                router: [
                    {
                        id: 1000,
                        path: '/home/userOverview',
                        name: "人员总览",
                        icon: 'User'
                    },
                    {
                        id: 1001,
                        path: '/home/assetsOverview',
                        name: "资产总览",
                        icon: 'Coin'
                    },
                ]
            },
            {
                name: '报表统计',
                icon: 'Histogram',
                router: [
                    {
                        id: 1002,
                        path: '/data/industryAnalysis',
                        name: "行业分析",
                        icon:'DataAnalysis'
                    },
                    {
                        id: 1003,
                        path: '/data/digitalControl',
                        name: "数控中心",
                        icon: 'Cpu'
                    },
                ]
            }
        ]
        const router = useRouter()
        const changeRouter = (path) => {
            router.push(path)
        }

        onMounted(() => {
        })

        watch(() => router.currentRoute.value.path, (newValue) => {
            
            if (newValue.indexOf('/Login') != -1 || newValue.indexOf('/login') != -1) {
                showNav.value = false
                user_token.value = null
                let res = removeToken()
                res= removeUserInfo()
                return
            } else {
                if (newValue == '/') {
                    return
                }

                user_token.value = getToken()
                
                if (user_token) {
                    showNav.value = true
                } else {
                    message.warning('获取用户凭据失败,请重新登录')
                    showNav.value = false
                    router.push('/login')
                }
                // updateKey.value+=1
            }
        }, { immediate: true })


        return { changeRouter, tabTitle, showNav, user_token }
    }
};
</script>

<style scoped lang="less">
.app {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
}

.nav {
    width: 200px;
    height: 100%;
    // background-color: aquamarine;
    text-align: center;
    .logo{
        width: 180px;
        height: 60px;
        background-color: #fff;
        border-radius: 4px;
        margin: 10px;
        // border: 1px solid black;
        // box-shadow: 5px 3px 5px 0px rgba(0, 0, 0, 0.25);
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width: 35px;
            height: 45px;
        }
        span{
            font-size: 24px;
            margin-left: 10px;
            font-weight: bold;
        }
    }
}

.nav-btn {
    width: 100%;
}

.el-button+.el-button {
    margin-left: 0px;
}

.main {
    flex: 1;
    height: 100%;
    background-color: azure;
}

/deep/ .el-menu-item.is-active{
    background-color: #ecf5ff;
    border-radius: 8px;
    color: #409eff;
    font-weight: bold;
}
/deep/ .el-header{
    padding: 0;
    height: 90px;
}

</style>